<template>
  <div class="breadCrumb">
    <el-breadcrumb :separator-class="isFist ? 'none' : 'el-icon-arrow-right'">
      <el-breadcrumb-item :to="{ path: '/home' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: activePath.path }">{{
        activePath.title
      }}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="activePath.children" :to="{ path: activePath.children.path }">{{activePath.children.title}}</el-breadcrumb-item>
      <el-breadcrumb-item
        :to="{ path: item.path }"
        v-for="item in levelList"
        :key="item.path"
        >{{ item.name }}</el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  props: {
    activePath: {
      type: Object,
      default: () => {
        return {}
      },
    },
    isFist: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      levelList: [],
    }
  },
  watch: {
    $route() {
      this.getBreadCrumb()
    },
  },
  created() {
    this.getBreadCrumb()
  },
  methods: {
    //  获取面包屑路由
    getBreadCrumb() {
      let matched = this.$route.matched.filter((item) => item.name)
      this.levelList = matched
      console.log('面包屑导航', matched)
    },
  },
}
</script>

<style lang="scss" scoped>
.none {
  ::v-deep .el-breadcrumb__separator[class*='icon'] {
    display: none;
  }
}
.breadCrumb {
  position: sticky;
  top: 0;
  width: 100%;
  height: 40px;
  display: flex;
  padding-left: 10px;
  align-items: center;
  background-color: #fff;
  z-index: 33;
  
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
</style>